<!--图表-->
import func from './vue-temp/vue-editor-bridge';
<template>
	<div class="charts-main">
		<!-- 曲线图 -->
		<div class="charts-bar">
			<h3>温度趋势图</h3>
			<div id="charts">
			</div>
		</div>
		<!-- 概述 -->
		<div class="data">
			<div>
				<Table :columns="tablesName" :data="historyData"></Table>
				<!-- 分页栏 -->
				<div>
					<Page :total="dataCount" :page-size="pageSize" size="small" show-elevator show-sizer
						@on-change="onChange" @on-page-size-change="changPage" show-total></Page>
				</div>
			</div>
			<!-- 概述 -->
			<div class="summary">
				<div class="main">
					<h3>概述</h3>
					<ul>
						<li>最大温度:{{ summaryData.maxTemperature }}℃</li>
						<li>最小温度:{{ summaryData.minTemperature }}℃</li>
						<li>平均温度:{{ summaryData.avgTemperature }}℃</li>
						<li>电量信息:{{ summaryData.batValue }}%</li>
						<li>记录间隔:{{ summaryData.interval1 }}分钟</li>
						<li>温度上限:{{ summaryData.downTemperature }}℃</li>
						<li>温度下限:{{ summaryData.upTemperature }}℃</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var moment = require('moment')
moment.locale('zh-cn')
export default {
	props: ['chartsData'],
	/*
		数据, 起始时间, 间隔, 最大温度, 最小温度, 标题
		数据第一个代表开始时间，往后每个用开始时间 + 数据的索引*间隔
	*/
	data() {
		return {
			// y轴刻度值
			// x轴刻度
			tablesName: [
				{
					title: '序号',
					key: 'num'
				},
				{
					title: '记录时间',
					key: 'time'
				},
				{
					title: '温度',
					key: 'data'
				}
			],
			pageSize: 10, // 每页显示条数
			dataCount: 0, // 初始化总共条数
			ajaxHistorData: [],
			historyData: [],
			summaryData: [] // 概述数据
		}
	},

	computed: {
		// 曲线数据
		chartsVal() {
			let arr = this.chartsData
			let arr2 = ''
			for (let i in arr) {
				arr2 = arr[0].startToReadTemp
			}
			return arr2.split(',')
		},
		// // 记录时间
		tempTime() {
			let arr = this.chartsData
			let recTime
			for (let i in arr) {
				recTime = moment(arr[0].tempTime).format('X') // 记录时间转换unix时间
			}
			return recTime
		},
		// 记录间隔
		interval() {
			let arr = this.chartsData
			for (let i in arr) {
				return arr[0].interval1 * 60 // 记录间隔转换
			}
		},

		// x时间轴
		xTime() {
			let arr = []
			let data = this.chartsVal // 曲线数据
			let interval = Number(this.interval)
			let recTime = Number(this.tempTime)

			for (let i in data) {
				arr[i] = moment.unix(recTime + i * interval).format('YYYY-MM-DD HH:mm:ss') // 计算每条记录的时间
			}
			return arr
		},
		// 温度最大刻度
		// 最大温度+5度，最小温度-5度，用来做曲线y轴刻度值
		maxScale() {
			let arr = this.chartsData
			for (let i in arr) {
				return parseInt(arr[0].maxTemperature + 5)
			}
		},
		// 温度最小刻度
		minScale() {
			let arr = this.chartsData
			for (let i in arr) {
				return parseInt(arr[0].minTemperature - 5)
			}
		},
		// 详细数据
		detailsData() {
			let data = this.chartsVal
			let time = this.xTime
			let arr2 = []
			for (let i in data) {
				arr2.push({
					'time': time[i],
					'data': data[i],
					'num': parseInt(i) + 1
				})
			}
			this.dataCount = arr2.length
			return arr2
		}
	},
	mounted() {
	},
	methods: {
		// 分页
		handleListApproveHistory() {
			this.ajaxHistorData = this.detailsData
			if (this.detailsData.length < this.pageSize) {
				this.historyData = this.ajaxHistorData
			} else {
				this.historyData = this.ajaxHistorData.slice(0, this.pageSize)
			}
		},
		// 点击某页面
		onChange(index) {
			let _start = (index - 1) * this.pageSize
			let _end = index * this.pageSize
			this.historyData = this.ajaxHistorData.slice(_start, _end)
		},
		// 切换每页显示条数
		changPage(val) {
			// 改变每页显示条数，再重新执行分页
			this.pageSize = val
			this.handleListApproveHistory()
		},
		// 概述数据
		summary() {
			let data = this.chartsData[0]
			this.summaryData = data
		},

		drawLine() {
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('charts'))
			// 绘制图表
			myChart.setOption({
				title: {
					text: '' // 标题
				},
				// 鼠标提示内容 'item':数据项
				// 'axis':坐标轴触发
				tooltip: {
					trigger: 'axis' // 鼠标放上去的提示内容 axis表示X轴
				},
				// 缩放
				dataZoom: [
					{
						show: true,
						realtime: true
					}
				],
				// X轴数据
				xAxis: [
					{
						type: 'category',
						data: this.xTime // x轴时间
					}
				],
				yAxis: [
					{
						type: 'value',
						scale: true,
						max: this.maxScale, // 最大刻度
						min: this.minScale, // 最小刻度
					}
				],
				series: [
					{
						name: '温度',
						type: 'line', // 类型 'line' 线性, 'bar' 饼图
						showSymbol: false,
						data: this.chartsVal, // 数据
					}
				]
			});
		}
	},
	created() {
		// console.log(this.myData)
		this.handleListApproveHistory()
	},
	watch: {
		// 监听到图图表有数据再进行加载，否则加载不成功
		chartsVal: {
			deep: true,
			handler: function(old, newVal) {
				this.drawLine()
				this.summary()
			}
		},
		'detailsData': {
			deep: true,
			handler: function(data) {
				this.handleListApproveHistory()
			}
		}
	}
}
</script>

<style lang="less" scoped>
#charts {
	width: 100%;
	height: 300px;
}

h3 {
	border-bottom: 1px solid #ddd;
	line-height: 2.8em;
	background-color: #f7f7f7;
}

.charts-main {
	width: 1000px;
	margin: 0 auto;

	.charts-bar {
		padding: 20px 0;
		margin-bottom: 20px;
		border: 1px solid #ddd;

		>h3 {
			margin: -20px 0 0 0;
			padding: 0 20px;
		}
	}

	.data {
		.clear-fix;
		position: relative;
		height: auto;

		>div {
			width: 60%;
			float: left;
		}

		.summary {
			position: absolute;
			padding-left: 20px;
			right: 0;
			width: 40%;
			height: 100%;

			.main {
				width: 100%;
				height: 100%;
				border: 1px solid #ddd;
				padding: 15px;

				>h3 {
					margin: -15px -15px 0 -15px;
					padding-left: 15px;
				}

				ul {
					padding-top: 15px;

					li {
						margin: 15px 0;
					}
				}
			}
		}
	}
}
</style>
